<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东 - 个人中心</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* 顶部导航 */
        .top-nav {
            background-color: #e3e4e5;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #999;
        }
        
        .top-nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        
        .top-nav-left, .top-nav-right {
            display: flex;
            list-style: none;
        }
        
        .top-nav-item {
            margin: 0 10px;
        }
        
        .top-nav-item a {
            color: #999;
            text-decoration: none;
        }
        
        .top-nav-item a:hover {
            color: #e4393c;
        }
        
        /* 头部 */
        .header {
            background-color: #fff;
            padding: 20px 0;
        }
        
        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .logo img {
            height: 60px;
        }
        
        .search-box {
            display: flex;
            width: 500px;
            height: 40px;
            border: 2px solid #e4393c;
            border-radius: 20px;
            overflow: hidden;
        }
        
        .search-input {
            flex: 1;
            border: none;
            padding: 0 15px;
            font-size: 14px;
        }
        
        .search-input:focus {
            outline: none;
        }
        
        .search-button {
            width: 80px;
            background-color: #e4393c;
            color: #fff;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        
        .cart {
            position: relative;
            width: 130px;
            height: 40px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .cart-icon {
            margin-right: 5px;
            color: #e4393c;
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: 20px;
            background-color: #e4393c;
            color: #fff;
            font-size: 12px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            border-radius: 50%;
        }
        
        /* 个人中心内容区 */
        .profile-container {
            flex: 1;
            max-width: 1200px;
            margin: 30px auto;
            display: flex;
            gap: 20px;
        }
        
        /* 侧边栏 */
        .sidebar {
            width: 200px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        .sidebar-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .sidebar-menu {
            list-style: none;
        }
        
        .sidebar-menu-item {
            margin-bottom: 15px;
        }
        
        .sidebar-menu-item a {
            display: block;
            padding: 8px 10px;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        .sidebar-menu-item a:hover,
        .sidebar-menu-item.active a {
            background-color: #f5f5f5;
            color: #e4393c;
        }
        
        .sidebar-menu-item i {
            margin-right: 10px;
            width: 16px;
            text-align: center;
        }
        
        /* 主内容区 */
        .main-content {
            flex: 1;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        .content-title {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        /* 个人信息卡片 */
        .profile-card {
            display: flex;
            align-items: center;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #e4393c;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            margin-right: 20px;
        }
        
        .profile-info {
            flex: 1;
        }
        
        .profile-name {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .profile-mobile {
            color: #666;
            margin-bottom: 10px;
        }
        
        .profile-actions {
            display: flex;
            gap: 10px;
        }
        
        .profile-action {
            padding: 6px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #333;
            text-decoration: none;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .profile-action:hover {
            background-color: #f5f5f5;
        }
        
        /* 订单统计 */
        .order-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background-color: #fff;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            transition: transform 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-icon {
            font-size: 24px;
            color: #e4393c;
            margin-bottom: 10px;
        }
        
        .stat-number {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        /* 最近订单 */
        .recent-orders {
            margin-bottom: 30px;
        }
        
        .orders-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 15px;
        }
        
        .orders-tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }
        
        .order-tab {
            padding: 10px 20px;
            cursor: pointer;
            font-size: 14px;
            color: #666;
        }
        
        .order-tab.active {
            color: #e4393c;
            border-bottom: 2px solid #e4393c;
        }
        
        .order-item {
            border: 1px solid #eee;
            border-radius: 4px;
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .order-header {
            background-color: #f9f9f9;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #666;
        }
        
        .order-number {
            font-weight: 500;
        }
        
        .order-date {
            margin-left: 20px;
        }
        
        .order-status {
            color: #e4393c;
        }
        
        .order-content {
            display: flex;
        }
        
        .order-product {
            flex: 1;
            display: flex;
            padding: 15px;
        }
        
        .order-product-image {
            width: 80px;
            height: 80px;
            margin-right: 15px;
        }
        
        .order-product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 1px solid #eee;
        }
        
        .order-product-info {
            flex: 1;
        }
        
        .order-product-name {
            font-size: 14px;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .order-product-price {
            font-size: 16px;
            font-weight: 500;
            color: #e4393c;
        }
        
        .order-actions {
            width: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-left: 1px solid #eee;
        }
        
        .order-action {
            padding: 8px 15px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #333;
            text-decoration: none;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .order-action:hover {
            background-color: #f5f5f5;
        }
        
        .order-action.primary {
            background-color: #e4393c;
            color: #fff;
            border-color: #e4393c;
        }
        
        .order-action.primary:hover {
            background-color: #d62c2f;
        }
        
        /* 收藏商品 */
        .favorites {
            margin-bottom: 30px;
        }
        
        .favorites-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 15px;
        }
        
        .favorites-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        
        .favorite-item {
            border: 1px solid #eee;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .favorite-image {
            height: 150px;
        }
        
        .favorite-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .favorite-info {
            padding: 10px;
        }
        
        .favorite-name {
            font-size: 14px;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .favorite-price {
            font-size: 16px;
            font-weight: 500;
            color: #e4393c;
            margin-bottom: 10px;
        }
        
        .favorite-actions {
            display: flex;
            gap: 10px;
        }
        
        .favorite-action {
            flex: 1;
            padding: 6px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
            color: #333;
            text-decoration: none;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .favorite-action:hover {
            background-color: #f5f5f5;
        }
        
        /* 底部 */
        .footer {
            background-color: #fff;
            padding: 20px 0;
            border-top: 1px solid #ddd;
        }
        
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            color: #666;
            font-size: 12px;
        }
        
        .footer-links {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: #666;
            text-decoration: none;
            margin: 0 10px;
        }
        
        .footer-links a:hover {
            color: #e4393c;
        }
        
        /* 弹窗样式 */
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 400px;
            z-index: 1000;
            animation: fadeInPopup 0.3s ease-out;
        }
        
        @keyframes fadeInPopup {
            from { opacity: 0; transform: translate(-50%, -60%); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }
        
        .popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .popup-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
        
        .popup-close {
            font-size: 20px;
            color: #999;
            cursor: pointer;
        }
        
        .popup-content {
            color: #666;
            margin-bottom: 20px;
        }
        
        .popup-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .popup-button {
            padding: 8px 20px;
            background-color: #2878ff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .popup-button:hover {
            background-color: #1a64e6;
        }
        
        .popup-button.cancel {
            background-color: #f5f5f5;
            color: #333;
        }
        
        .popup-button.cancel:hover {
            background-color: #eee;
        }
        
        .popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 999;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: #666;
        }
        
        .form-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #2878ff;
        }
        
        /* 响应式 */
        @media (max-width: 1200px) {
            .header-container, .profile-container, .footer-container {
                padding: 0 20px;
            }
            
            .search-box {
                width: 400px;
            }
        }
        
        @media (max-width: 992px) {
            .search-box {
                width: 300px;
            }
            
            .profile-container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                margin-bottom: 20px;
            }
            
            .sidebar-menu {
                display: flex;
                flex-wrap: wrap;
            }
            
            .sidebar-menu-item {
                margin: 5px;
            }
            
            .order-stats {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .favorites-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .search-box {
                width: 100%;
                margin: 15px 0;
            }
            
            .cart {
                align-self: flex-end;
                margin-top: -55px;
            }
            
            .top-nav {
                display: none;
            }
            
            .profile-card {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .profile-avatar {
                margin-bottom: 15px;
            }
            
            .order-content {
                flex-direction: column;
            }
            
            .order-actions {
                width: 100%;
                flex-direction: row;
                justify-content: space-around;
                border-left: none;
                border-top: 1px solid #eee;
                padding: 10px 0;
            }
            
            .favorites-grid {
                grid-template-columns: 1fr;
            }
            
            .popup {
                width: 90%;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <div class="top-nav-container">
            <ul class="top-nav-left">
                <li class="top-nav-item"><a href="#">北京</a></li>
            </ul>
            <ul class="top-nav-right">
                <!-- 未登录状态 -->
                <li id="login-link" class="top-nav-item"><a href="login.html">你好，请登录</a></li>
                <li id="register-link" class="top-nav-item"><a href="register.html">免费注册</a></li>
                
                <!-- 登录状态 -->
                <li id="user-menu" class="top-nav-item user-menu" style="display: none;">
                    <div class="user-menu-toggle">
                        <div class="user-avatar">
                            <span id="user-initial">U</span>
                        </div>
                        <span id="username-display">用户名</span>
                    </div>
                    <div class="user-dropdown">
                        <div class="user-dropdown-item" onclick="goToProfile()">个人中心</div>
                        <div class="user-dropdown-item" onclick="logout()">退出登录</div>
                    </div>
                </li>
                
                <li class="top-nav-item"><a href="#">我的订单</a></li>
                <li class="top-nav-item"><a href="#">我的京东</a></li>
                <li class="top-nav-item"><a href="#">客户服务</a></li>
            </ul>
        </div>
    </div>
    
    <!-- 头部 -->
    <header class="header">
        <div class="header-container">
            <div class="logo">
                <a href="index.html"><img src="https://picsum.photos/id/237/200/60" alt="京东Logo"></a>
            </div>
            
            <div class="search-box">
                <input type="text" class="search-input" placeholder="搜索商品">
                <button class="search-button"><i class="fa fa-search"></i></button>
            </div>
            
            <div class="cart">
                <i class="fa fa-shopping-cart cart-icon"></i>
                <span>购物车</span>
                <span class="cart-count">0</span>
            </div>
        </div>
    </header>
    
    <!-- 个人中心内容区 -->
    <main class="profile-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-title">
                <i class="fa fa-user-circle"></i> 个人中心
            </div>
            <ul class="sidebar-menu">
                <li class="sidebar-menu-item active">
                    <a href="profile.html"><i class="fa fa-home"></i> 个人首页</a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#orders"><i class="fa fa-list-alt"></i> 我的订单</a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#favorites"><i class="fa fa-heart"></i> 我的收藏</a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#address"><i class="fa fa-map-marker"></i> 收货地址</a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#coupons"><i class="fa fa-ticket"></i> 优惠券</a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#account"><i class="fa fa-cog"></i> 账户设置</a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#security"><i class="fa fa-shield"></i> 账户安全</a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#messages"><i class="fa fa-envelope"></i> 消息通知</a>
                </li>
            </ul>
        </aside>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <div class="content-title">
                个人首页
            </div>
            
            <!-- 个人信息卡片 -->
            <div class="profile-card">
                <div class="profile-avatar" id="profileAvatar">
                    <span id="profileInitial">U</span>
                </div>
                <div class="profile-info">
                    <div class="profile-name" id="profileName">用户名</div>
                    <div class="profile-mobile">手机号码: <span id="profilePhone">138****1234</span></div>
                    <div class="profile-actions">
                        <a href="#account" class="profile-action">修改资料</a>
                        <a href="#security" class="profile-action">修改密码</a>
                    </div>
                </div>
            </div>
            
            <!-- 订单统计 -->
            <div class="order-stats">
                <div class="stat-card">
                    <div class="stat-icon"><i class="fa fa-clock-o"></i></div>
                    <div class="stat-number" id="pendingCount">0</div>
                    <div class="stat-label">待付款</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="fa fa-truck"></i></div>
                    <div class="stat-number" id="shippingCount">0</div>
                    <div class="stat-label">待发货</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="fa fa-package"></i></div>
                    <div class="stat-number" id="deliveringCount">0</div>
                    <div class="stat-label">待收货</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="fa fa-check-circle"></i></div>
                    <div class="stat-number" id="completedCount">0</div>
                    <div class="stat-label">已完成</div>
                </div>
            </div>
            
            <!-- 最近订单 -->
            <div class="recent-orders">
                <div class="orders-title">
                    最近订单
                    <a href="#orders" class="order-view-all">查看全部订单</a>
                </div>
                <div class="orders-tabs">
                    <div class="order-tab active" data-tab="all">全部订单</div>
                    <div class="order-tab" data-tab="pending">待付款</div>
                    <div class="order-tab" data-tab="shipping">待发货</div>
                    <div class="order-tab" data-tab="delivering">待收货</div>
                    <div class="order-tab" data-tab="completed">已完成</div>
                </div>
                
                <!-- 订单列表 -->
                <div class="order-list" id="orderList">
                    <!-- 订单项目会通过JavaScript动态生成 -->
                </div>
            </div>
            
            <!-- 收藏商品 -->
            <div class="favorites">
                <div class="favorites-title">
                    我的收藏
                    <a href="#favorites" class="favorites-view-all">查看全部收藏</a>
                </div>
                <div class="favorites-grid" id="favoritesList">
                    <!-- 收藏商品会通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </main>
    
    <!-- 底部 -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-links">
                <a href="#" style="color: #666; text-decoration: none; margin: 0 10px;">关于我们</a>
                <a href="#" style="color: #666; text-decoration: none; margin: 0 10px;">联系我们</a>
                <a href="#" style="color: #666; text-decoration: none; margin: 0 10px;">网站地图</a>
                <a href="#" style="color: #666; text-decoration: none; margin: 0 10px;">隐私政策</a>
                <a href="#" style="color: #666; text-decoration: none; margin: 0 10px;">京东社区</a>
                <a href="#" style="color: #666; text-decoration: none; margin: 0 10px;">诚聘英才</a>
            </div>
            <p style="margin-top: 10px;">Copyright © 2004-2023 京东JD.com 版权所有 | 京ICP证070359号</p>
        </div>
    </footer>
    
    <!-- 弹窗元素 -->
    <div id="errorPopup" class="popup">
        <div class="popup-header">
            <div class="popup-title">提示</div>
            <div class="popup-close" onclick="closePopup()">&times;</div>
        </div>
        <div class="popup-content" id="popupMessage"></div>
        <div class="popup-actions">
            <button class="popup-button" onclick="closePopup()">确定</button>
        </div>
    </div>
    
    <div id="popupOverlay" class="popup-overlay" onclick="closePopup()"></div>
    
    <script>
        // 模拟订单数据
        const orders = [
            {
                id: '2023061500001',
                date: '2023-06-15 14:30:25',
                status: '待付款',
                products: [
                    {
                        id: 1001,
                        name: '高品质智能手表，支持心率监测',
                        image: 'https://picsum.photos/id/1/300/300',
                        price: 1299
                    }
                ],
                total: 1299
            },
            {
                id: '2023061000002',
                date: '2023-06-10 09:15:42',
                status: '待收货',
                products: [
                    {
                        id: 1002,
                        name: '超薄笔记本电脑，高性能处理器',
                        image: 'https://picsum.photos/id/20/300/300',
                        price: 4599
                    }
                ],
                total: 4599
            },
            {
                id: '2023060500003',
                date: '2023-06-05 16:45:10',
                status: '已完成',
                products: [
                    {
                        id: 1003,
                        name: '高清智能电视，4K超高清画质',
                        image: 'https://picsum.photos/id/96/300/300',
                        price: 3299
                    }
                ],
                total: 3299
            }
        ];
        
        // 模拟收藏商品数据
        const favorites = [
            {
                id: 2001,
                name: '专业摄影相机，高清画质',
                image: 'https://picsum.photos/id/3/300/300',
                price: 5699
            },
            {
                id: 2002,
                name: '便携式投影仪，家庭影院',
                image: 'https://picsum.photos/id/24/300/300',
                price: 2399
            },
            {
                id: 2003,
                name: '智能手环，健康监测',
                image: 'https://picsum.photos/id/42/300/300',
                price: 299
            }
        ];
        
        // 显示错误弹窗
        function showErrorPopup(message) {
            document.getElementById('popupMessage').textContent = message;
            document.getElementById('errorPopup').style.display = 'block';
            document.getElementById('popupOverlay').style.display = 'block';
        }
        
        // 关闭弹窗
        function closePopup() {
            document.getElementById('errorPopup').style.display = 'none';
            document.getElementById('popupOverlay').style.display = 'none';
        }
        
        // 检查登录状态
        function checkLoginStatus() {
            // 从localStorage获取登录状态
            const username = localStorage.getItem('username');
            
            if (username) {
                // 用户已登录
                document.getElementById('login-link').style.display = 'none';
                document.getElementById('register-link').style.display = 'none';
                document.getElementById('user-menu').style.display = 'block';
                document.getElementById('username-display').textContent = username;
                document.getElementById('profileName').textContent = username;
                
                // 设置用户头像首字母
                const initial = username.charAt(0).toUpperCase();
                document.getElementById('user-initial').textContent = initial;
                document.getElementById('profileInitial').textContent = initial;
                
                // 填充订单统计数据
                document.getElementById('pendingCount').textContent = 1;
                document.getElementById('shippingCount').textContent = 0;
                document.getElementById('deliveringCount').textContent = 1;
                document.getElementById('completedCount').textContent = 1;
                
                // 生成订单列表
                generateOrderList();
                
                // 生成收藏列表
                generateFavoritesList();
            } else {
                // 用户未登录，跳转到登录页面
                window.location.href = 'login.html';
            }
        }
        
        // 跳转到个人中心
        function goToProfile() {
            window.location.href = 'profile.html';
        }
        
        // 退出登录
        function logout() {
            // 清除localStorage中的登录状态
            localStorage.removeItem('username');
            
            // 刷新页面
            window.location.href = 'index.html';
        }
        
        // 生成订单列表
        function generateOrderList() {
            const orderList = document.getElementById('orderList');
            orderList.innerHTML = '';
            
            if (orders.length === 0) {
                orderList.innerHTML = '<div style="text-align: center; padding: 50px;">暂无订单</div>';
                return;
            }
            
            orders.forEach(order => {
                const orderItem = document.createElement('div');
                orderItem.className = 'order-item';
                
                let statusClass = '';
                let statusText = order.status;
                
                switch(order.status) {
                    case '待付款':
                        statusClass = 'text-warning';
                        break;
                    case '待发货':
                        statusClass = 'text-info';
                        break;
                    case '待收货':
                        statusClass = 'text-primary';
                        break;
                    case '已完成':
                        statusClass = 'text-success';
                        break;
                    case '已取消':
                        statusClass = 'text-muted';
                        break;
                }
                
                orderItem.innerHTML = `
                    <div class="order-header">
                        <div>
                            <span class="order-number">订单号: ${order.id}</span>
                            <span class="order-date">${order.date}</span>
                        </div>
                        <div class="order-status ${statusClass}">${statusText}</div>
                    </div>
                    <div class="order-content">
                        <div class="order-product">
                            <div class="order-product-image">
                                <img src="${order.products[0].image}" alt="${order.products[0].name}">
                            </div>
                            <div class="order-product-info">
                                <div class="order-product-name">${order.products[0].name}</div>
                                <div class="order-product-price">¥${order.products[0].price.toFixed(2)}</div>
                            </div>
                        </div>
                        <div class="order-actions">
                            ${order.status === '待付款' ? '<a href="#" class="order-action primary">立即付款</a>' : ''}
                            ${order.status === '待收货' ? '<a href="#" class="order-action">查看物流</a>' : ''}
                            ${order.status === '已完成' ? '<a href="#" class="order-action">评价</a>' : ''}
                            <a href="#" class="order-action">查看详情</a>
                        </div>
                    </div>
                `;
                
                orderList.appendChild(orderItem);
            });
        }
        
        // 生成收藏列表
        function generateFavoritesList() {
            const favoritesList = document.getElementById('favoritesList');
            favoritesList.innerHTML = '';
            
            if (favorites.length === 0) {
                favoritesList.innerHTML = '<div style="text-align: center; padding: 50px;">暂无收藏</div>';
                return;
            }
            
            favorites.forEach(favorite => {
                const favoriteItem = document.createElement('div');
                favoriteItem.className = 'favorite-item';
                
                favoriteItem.innerHTML = `
                    <div class="favorite-image">
                        <img src="${favorite.image}" alt="${favorite.name}">
                    </div>
                    <div class="favorite-info">
                        <div class="favorite-name">${favorite.name}</div>
                        <div class="favorite-price">¥${favorite.price.toFixed(2)}</div>
                        <div class="favorite-actions">
                            <a href="#" class="favorite-action">加入购物车</a>
                            <a href="#" class="favorite-action">删除</a>
                        </div>
                    </div>
                `;
                
                favoritesList.appendChild(favoriteItem);
            });
        }
        
        // 页面加载时检查登录状态
        window.addEventListener('load', function() {
            checkLoginStatus();
            
            // 订单标签切换
            const orderTabs = document.querySelectorAll('.order-tab');
            orderTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有标签的active类
                    orderTabs.forEach(t => t.classList.remove('active'));
                    
                    // 添加当前标签的active类
                    this.classList.add('active');
                    
                    // 这里可以根据标签筛选订单
                    const tabType = this.getAttribute('data-tab');
                    // 实际项目中应该根据tabType筛选订单
                });
            });
        });
    </script>
</body>
</html>
